<template>
  <div style="background: #f6f6f6">
    <div style="position: absolute">
      <van-sticky :offset-top="29.125 + 'rem'">
        <img
          style="width: 40%"
          src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/huod.gif"
          alt=""
        />
      </van-sticky>
    </div>
    <!-- 顶部搜索 -->
    <el-row class="top_Search">
      <el-col class="top_ss" :style="style">
        <div class="list_item"><van-icon name="wap-nav" /></div>
        <div class="Search_box" @click="toSearch">
          <i class="el-icon-search"></i>
          <div style="position: relative">
            <textra
              class="wods"
              :data="words"
              :timer="2.1"
              :infinite="true"
              filter="top-bottom"
            />
          </div>
        </div>
        <div class="list_item list_right"><van-icon name="friends-o" /></div>
      </el-col>
    </el-row>

    <!-- 轮播图 -->
    <div class="el-carousel">
      <img
        src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/homePageban.jpg"
      />
    </div>
    <!-- 轮播图 -->
    <div class="lunpoimg">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in bannerlist" :key="index">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div style="padding: 5px">
      <!-- 活动分类 -->
      <el-card class="actice">
        <ul>
          <li>
            <a>
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/supmaketicon.gif"
              />
              <p>特惠超市</p>
            </a>
          </li>
          <li>
            <a>
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/Specialoffers.png"
              />
              <p>今日特惠</p>
            </a>
          </li>
          <li style="position: relative">
            <a href="#">
              <div class="wawo">
                <img
                  src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/wow.gif"
                  alt=""
                />
              </div>
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/typeicons3.png"
              />
              <p>数码产品</p>
            </a>
          </li>
          <li>
            <a>
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/typeicons1.png"
              />
              <p>Trve生鲜</p>
            </a>
          </li>

          <li>
            <a href="#">
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/yofu.gif"
              />
              <p>精品服饰</p>
            </a>
          </li>

          <li style="position: relative">
            <a href="#">
              <div class="wawo" style="left: 7px">
                <img
                  src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/Lightning.gif"
                  alt=""
                />
              </div>
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/typeicon7.png"
              />
              <p>闪电购</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/typeicon6.png"
              />
              <p>优惠券</p>
            </a>
          </li>
          <li>
            <router-link :to="{ name: 'Type' }">
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/typeicon8.png"
              />
              <p>分类</p>
            </router-link>
          </li>
        </ul>
      </el-card>
      <!-- 热门标题 -->
      <el-row class="hotTitle">
        <el-col :span="8">
          <img
            src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/hotit.png"
            alt=""
          />
        </el-col>
        <el-col :span="14" class="hot_text">
          <van-notice-bar scrollable text="商城开业狂欢！四重大礼等你来抢！" />
        </el-col>
      </el-row>
      <!-- 秒杀活动 -->
      <el-card class="timeBuy">
        <el-row class="buytitle">
          <el-col>
            <div class="miaosha_box">
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/miaosha.gif"
                alt=""
              />
            </div>
          </el-col>
          <el-col :span="23">
            <router-link :to="{ name: 'discove' }" class="title_btn">
              全场一折起
            </router-link>
            <router-link :to="{ name: 'discove' }" class="morn">
              <i class="el-icon-arrow-right"></i>
            </router-link>
          </el-col>
        </el-row>
        <el-row class="buylist">
          <vue-seamless-scroll
            :data="Special"
            :class-option="optionLeft"
            class="seamless-warp2"
          >
            <ul class="te_miao">
              <li
                @click="toDeatls(item)"
                v-for="(item, index) in Special"
                :key="index"
              >
                <img
                  style="width: 104px"
                  :src="imgUrl + item.GoodsPic"
                  alt=""
                />
                <p>￥{{ item.GoodsPrice }}.00</p>
              </li>
            </ul>
          </vue-seamless-scroll>
        </el-row>
      </el-card>

      <!-- 中间banner -->
      <el-row>
        <el-col>
          <img
            class="banimg"
            src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/43.png"
            alt=""
          />
        </el-col>
      </el-row>

      <!-- 主题分类 -->
      <el-card style="border-radius: 10px; margin: 10px 0">
        <el-row>
          <el-col :span="12" class="col_list">
            <router-link :to="{ name: 'discove' }">
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/1.png"
                class="type_list"
                alt=""
              />
            </router-link>
          </el-col>
          <el-col :span="6" class="col_list">
            <router-link :to="{ name: 'discove' }">
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/2.png"
                class="type_list"
                alt=""
              />
            </router-link>
          </el-col>
          <el-col :span="6" class="col_list">
            <router-link :to="{ name: 'discove' }">
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/3.png"
                class="type_list"
                alt=""
              />
            </router-link>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="col_list">
            <router-link :to="{ name: 'discove' }">
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/1.png"
                class="type_list"
                alt=""
              />
            </router-link>
          </el-col>
          <el-col :span="6" class="col_list">
            <router-link :to="{ name: 'discove' }">
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/2.png"
                class="type_list"
                alt=""
              />
            </router-link>
          </el-col>
          <el-col :span="6" class="col_list">
            <router-link :to="{ name: 'discove' }">
              <img
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/3.png"
                class="type_list"
                alt=""
              />
            </router-link>
          </el-col>
        </el-row>
      </el-card>

      <!-- 品牌特卖 -->
      <el-card style="border-radius: 10px; margin-bottom: 10px">
        <el-row class="hotM_3 pinpai">
          <el-col :span="8">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/honmeac_1.png"
              alt=""
            />
          </el-col>
          <el-col :span="8">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/honmeac_2.png"
              alt=""
            />
          </el-col>
          <el-col :span="8">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/honmeac_3.png"
              alt=""
            />
          </el-col>
        </el-row>
      </el-card>
      <!-- 热门主题 -->
      <el-card style="border-radius: 10px; margin-bottom: 10px">
        <el-row class="hotM_2">
          <el-col :span="12">
            <p><span style="color: red">热门</span>主题</p>
          </el-col>
          <el-col :span="12">
            <router-link :to="{ name: 'discove' }" class="morn_text"
              >更多</router-link
            >
            <router-link :to="{ name: 'discove' }" class="morn">
              <i class="el-icon-arrow-right"></i>
            </router-link>
          </el-col>
        </el-row>

        <el-row class="hotM_3">
          <el-col :span="12" class="hotM_3_right">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/12.png"
              alt=""
            />
          </el-col>
          <el-col :span="12" class="hotM_3_left">
            <el-row>
              <el-col class="hotM_3_left_itme" :span="12"
                ><img
                  src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/13.png"
                  alt=""
              /></el-col>
              <el-col class="hotM_3_left_itme" :span="12"
                ><img
                  src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/14.png"
                  alt=""
              /></el-col>
            </el-row>
            <el-row>
              <el-col class="hotM_3_left_itme" :span="12"
                ><img
                  src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/15.png"
                  alt=""
              /></el-col>
              <el-col class="hotM_3_left_itme" :span="12"
                ><img
                  src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/16.png"
                  alt=""
              /></el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row>
          <el-col class="hotM_3_left_itme" :span="6">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/17.png"
              alt=""
            />
          </el-col>
          <el-col class="hotM_3_left_itme" :span="6">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/18.png"
              alt=""
            />
          </el-col>
          <el-col class="hotM_3_left_itme" :span="6">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/19.png"
              alt=""
            />
          </el-col>
          <el-col class="hotM_3_left_itme" :span="6">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/20.png"
              alt=""
            />
          </el-col>
        </el-row>
      </el-card>
      <div class="mypart4">
        <img
          src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/my15.png"
        />
      </div>
      <!-- 猜你喜欢 -->
      <guessLike></guessLike>
    </div>
  </div>
</template>
<script>
import guessLike from "../Children/GuessLike.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: { guessLike, vueSeamlessScroll },
  data() {
    return {
      bannerlist: [
        "https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/190118/39/18060/120961/611498e1Ea73d4c2e/8876a3412aadc0e4.jpg!cr_1053x420_4_0!q70.jpg.dpg",
        "https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/183780/5/18910/307771/6115de58Ecc594d83/51568e94b51b99d1.jpg!cr_1125x449_0_166!q70.jpg.dpg",
        "https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/205302/7/1012/209121/61158fcdE05c43476/69c9a03be6dbc32c.jpg!cr_1125x449_0_166!q70.jpg.dpg",
        "https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/180940/32/17239/105988/61079aa1Ef30224f6/dd133bbb8cb5db3b.jpg!cr_1053x420_4_0!q70.jpg.dpg",
      ],
      imgurl:
        "https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/",
      style: {},
      opacity: 0,
      words: [],
      Special: [],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.windowScroll); //监听页面滚动
  },
  created() {
    this.getwordsRecommended();
    this.GetSpecialgoods();
  },
  methods: {
    windowScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.opacity = Math.abs(Math.round(scrollTop)) / 250;
      this.style = { background: `rgba(255, 90, 68,${this.opacity})` };
    },
    async getwordsRecommended() {
      const { data: res } = await this.$http.get("wordsRecommended");
      console.log(res);

      res.data.forEach((item) => {
        this.words.push(item.Words);
      });
    },
    async GetSpecialgoods() {
      const { data: res } = await this.$http.get("Specialgoods");
      this.Special = res.data;
      console.log(res);
    },
    toSearch() {
      this.$router.push("/SearchGoods");
    },
    toDeatls(item) {
      this.$router.push({ name: "details", params: { gid: item.GoodsID } });
    },
  },
  computed: {
    optionLeft() {
      return {
        direction: 3,
        limitMoveNum: 4,
      };
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.windowScroll); //销毁滚动事件
  },
};
</script>
<style lang="less" scoped>
.actice {
  border-radius: 10px;
}
.top_Search {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  position: relative;

  .top_ss {
    padding: 5px 0;
    position: fixed;
    top: 0;
    z-index: 99999;
    width: 100%;
  }
  .list_item {
    position: absolute;
    /* margin-left: 5px; */
    margin: 3px 0 0 4px;
    i {
      font-size: 1.7rem;
      color: #fff;
    }
  }
  .list_right {
    right: 0;
    top: 0;
    margin: 10px 3px 0px 0px;
    i {
      font-size: 1.7rem;
      color: #fff;
    }
  }
  .Search_box {
    width: 80%;
    height: 2.2rem;
    line-height: 2.2rem;
    border: 1px solid #eee;
    border-radius: 10px;
    margin: 0 auto;
    background: #fff;

    i {
      height: 1.8rem;
      padding-left: 0.6rem;
    }
  }
}
.el-carousel {
  width: 100%;
  height: 208px;

  img {
    width: 100%;
    height: 208px;
  }
}
.actice {
  overflow: hidden;
  background: #fff;
  padding: 0 0 1rem 0;

  ul {
    overflow: hidden;

    li {
      width: 25%;
      float: left;
      text-align: center;
      margin-top: 0.7rem;

      img {
        width: 45%;
        display: block;
        margin: 5px auto;
      }
      p {
        width: 70%;
        display: block;
        margin: 5px auto;
      }
    }
  }
}
.hotTitle {
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  background: #fff;
  padding: 0.7rem;
  margin-top: 2px;
  .hot_text {
    display: flex;
    font-size: 0.8rem;
    line-height: 2.3rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-left: 0.1rem;
  }
}
.timeBuy {
  margin: 2px 0;
  border-bottom: 1px solid #eee;
  background: #fff;
  border-top: 1px solid #eee;
  border-radius: 10px;
  margin: 15px 0;
  .buytitle {
    padding: 0.5rem;
    height: 2.8rem;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    padding-right: 0.2rem;
    p {
      font-size: 0.875rem;
      float: left;
      height: 1.8rem;
      line-height: 1.8rem;
      max-width: 50%;
      overflow: hidden;
      color: #333;
    }
  }
  .title_btn {
    display: block;
    float: right;
    padding: 0 0.3rem;
    box-sizing: border-box;
    border: 1px solid #ff2150;
    border-radius: 4px;
    height: 1.6rem;
    line-height: 1.6rem;
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: #ff2150;
  }
  .morn {
    float: right;
    height: 1.5rem;
    width: 0rem;
    margin-top: 0.2rem;
    /* margin-left: 8rem; */
    margin-right: -77px;
    font-size: 1.5rem;
  }
  .buylist {
    overflow: hidden;
    width: 100%;
  }
  .item {
    text-align: center;
    padding: 0.5rem 0;
    overflow: hidden;
    border-right: 1px solid #eee;
    box-sizing: border-box;
    img {
      width: 80%;
    }
    p {
      text-align: center;
      font-size: 0.75rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.type_list {
  width: 100%;
  height: 100%;
}
.col_list {
  border-right: 1px solid #eee;
  box-sizing: border-box;
  height: 7rem;
}
.hotM_2 {
  padding: 0.5rem;
  height: 2.8rem;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  padding-right: 0.2rem;

  p {
    font-size: 0.875rem;
    float: left;
    height: 1.8rem;
    line-height: 1.8rem;
    max-width: 50%;
    overflow: hidden;
    color: #333;
  }
  i {
    font-style: normal;
    font-size: 0.85rem;
    padding-left: 0.4rem;
    padding-top: 0.5rem;
    height: 1.8rem;
    line-height: 0.6rem;
    float: left;
    overflow: hidden;
  }
  .morn {
    float: right;
    height: 1.5rem;
    width: 2rem;
    font-size: -0.4rem;
    /* padding-top: 2px; */
    position: relative;
    top: -25px;
    left: 3px;
    i {
      font-size: 1.5rem;
    }
  }
  .morn_text {
    float: left;
    display: block;
    margin-left: 8rem;
    /* margin-right: 10px; */
    height: 1.6rem;
    line-height: 1.8rem;
  }
}
.hotM_3_right {
  height: 10rem;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  box-sizing: border-box;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.hotM_3_left_itme {
  height: 5rem;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  box-sizing: border-box;
  overflow: hidden;

  border-right: 1px solid #eee;
}
.van-notice-bar {
  width: 100%;

  background-color: #fff;
}
.wawo {
  position: absolute;
  /* left: -9px; */
  width: 105px;
  height: 105px;
  transform: rotate(17deg);
  top: -20px;
}
.miaosha_box {
  width: 175px;
  height: 175px;
  position: absolute;
  top: -68px;
  left: -6px;
}
.banimg {
  border-radius: 10px;
  height: 180px;
  width: 100%;
}
.lunpoimg {
  position: relative;
  margin-top: -8.7rem;
  padding: 0 1rem;
  margin-bottom: 10px;
  img {
    height: 180px;
    width: 100%;
    border-radius: 0.625rem;
  }
}
.wods {
  position: absolute;
  top: -40px;
  left: 30px;
  color: #8c8c8c;
}
.mypart4 {
  padding: 0 1rem;
  padding-bottom: 0.5rem;
  img {
    display: block;
    margin: 0 auto;
    height: 1.5rem;
  }
}
.seamless-warp2 {
  overflow: hidden;
  height: 115px;
  width: 100%;
}
.te_miao {
  width: 550px;

  li {
    float: left;
    margin: 8px;
    width: 75px;
    p {
      text-align: center;
      color: #f2270c;
      font-size: 14px;
      font-weight: 600;
      line-height: 22px;
    }
  }
}
.pinpai {
  img {
    width: 113px;
    height: 120px;
    margin: 4px;
  }
}
</style>